<template>
	<view class="category-page">
		<view class="category-main">
			<!-- 左侧分类菜单 -->
			<scroll-view class="category-menu" scroll-y>
				<view v-for="(item, idx) in categoryList" :key="item.id" :class="['category-menu-item', idx === activeIndex ? 'active' : '']" @click="selectCategory(idx, item.id)">
					<text>{{ item.name }}</text>
				</view>
			</scroll-view>
			<!-- 右侧内容区 -->
			<view class="category-content">
				<!-- banner -->
        <!-- <u-swiper @click="clickBanner" :list="bannerList" height="200" radius="12" indicator indicatorMode="dot" /> -->

				<!-- 分类内容 -->
				<template v-if="!hasSubCategory">
					<view class="hot-title-row">
						<view class="hot-title-line"></view>
						<text class="hot-title">{{ currentCategoryName }}</text>
						<view class="hot-title-line"></view>
					</view>
					<view class="hot-service-grid">
						<view class="hot-service-item" v-for="item in currentCategoryGoods" :key="item.id" @click="toUrl('/pages/project/project?goodsId=' + item.id)">
							<image :src="item.image" class="hot-service-icon" mode="aspectFill" />
							<text class="hot-service-name">{{ item.name }}</text>
						</view>
					</view>
				</template>
				<template v-else>
					<view v-for="sub in subCategoryList" :key="sub.id">
						<view class="hot-title-row">
							<view class="hot-title-line"></view>
							<text class="hot-title">{{ sub.name }}</text>
							<view class="hot-title-line"></view>
						</view>
						<view class="hot-service-grid">
							<view class="hot-service-item" v-for="item in sub.goods || []" :key="item.id" @click="toUrl('/pages/project/project?projectId=' + item.id)">
								<image :src="item.image" class="hot-service-icon" mode="aspectFill" />
								<text class="hot-service-name">{{ item.name }}</text>
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
      bannerList: [],
			categoryList: [],
			activeIndex: 0,
		}
	},
	computed: {
		currentCategory() {
			return this.categoryList[this.activeIndex] || {};
		},
		currentCategoryName() {
			return this.currentCategory.name || '';
		},
		hasSubCategory() {
			return this.currentCategory.children && this.currentCategory.children.length > 0;
		},
		subCategoryList() {
			return this.currentCategory.children || [];
		},
		currentCategoryGoods() {
			return this.currentCategory.goods || [];
		}
	},
  onLoad() {
    this.$http.getBannerList({
      type: 'category'
    }).then(res => {
      if (Array.isArray(res)) {
        this.bannerList = res
      }
    })
  },
  onShow() {
    // 获取分类，假设接口返回的数据结构已包含children和goods
    this.$http.getCategoryList().then(res => {
      this.categoryList = res
      if (res.length) {
        this.activeIndex = res.findIndex(item => item.id == uni.getStorageSync('categoryId')) || 0
      }
    })
  },
	methods: {
    clickBanner(index) {
      const banner = this.bannerList[index]
      if (banner && banner.link) {
        console.log(banner)
        uni.navigateTo({
          url: banner.link
        })
      }
    },
		selectCategory(idx, id) {
      uni.setStorageSync('categoryId', id)
			this.activeIndex = idx
    },
		toUrl(url) {
			uni.navigateTo({ url });
		}
	}
}
</script>

<style lang="less">
page {
  height: 100%;
  overflow: hidden;
}
.category-page {
	background: #f7f7f7;
  height: 100%;
	display: flex;
	flex-direction: column;
}
.category-search-bar {
  height: 100%;
	display: flex;
	align-items: center;
	background: #fff;
	padding: 24rpx 24rpx 0 24rpx;
	border-radius: 0 0 24rpx 24rpx;
}
.category-search-input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-size: 28rpx;
	margin-left: 12rpx;
	color: #888;
}
.category-main {
	display: flex;
	flex: 1;
	min-height: 0;
}
.category-menu {
	width: 160rpx;
	background: #fff;
	border-radius: 24rpx 0 0 24rpx;
	padding-bottom: 16rpx;
	box-shadow: 2rpx 0 8rpx #f0f0f0;
}
.category-menu-item {
	padding: 32rpx 0;
	text-align: center;
	font-size: 26rpx;
	color: #666;
	border-left: 6rpx solid transparent;
	background: #fff;
	cursor: pointer;
  margin: 16rpx 0;
}
.category-menu-item.active {
	color: #ff6600;
	font-weight: bold;
	background: #f7f7f7;
	border-left: 6rpx solid #ff6600;
}
.category-content {
	flex: 1;
	padding: 0 24rpx;
	background: #f7f7f7;
	min-height: 0;
}
.category-banner {
	width: 100%;
	height: 200rpx;
	border-radius: 12rpx;
	object-fit: cover;
	margin: 24rpx 0 16rpx 0;
}
.hot-title-row {
	display: flex;
	align-items: center;
	justify-content: center;
  margin: 32rpx 0 48rpx 0;
}
.hot-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #222;
	margin: 0 16rpx;
}
.hot-title-line {
	width: 80rpx;
	height: 2rpx;
	background: #eee;
}
.hot-service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32rpx 0;
	padding-bottom: 32rpx;
}
.hot-service-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.hot-service-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin-bottom: 18rpx;
	object-fit: cover;
  overflow: hidden;
}
.hot-service-name {
	font-size: 22rpx;
	color: #333;
	text-align: center;
}
</style>
